
.home-page{
  .swiper{
    .custom-indicator{
      left: 50%;
      transform: translateX(-50%);
      .active{
        width: 58px;
        border-radius: 11px;
        background-color: #656362;
        opacity: 1;
      }
    }
  }
  .entrance{
    @apply flex justify-between h-[375px];
    .big-item{
      border-radius: 43px;
      box-shadow: 0px 9px 16px 0px rgba(153,153,153,0.3);
      @apply w-[342px] py-[30px] px-[36px] h-full bg-white;
      .name{
        @apply text-[47px] font-bold mb-[6px];
      }
      .text{
        font-size: 30px;
      }
    }
    .small-box{
      @apply flex flex-col justify-between;
      .s-item{
        box-shadow: 0px 9px 16px 0px rgba(153,153,153,0.3);
        border-radius: 43px;
        @apply w-[342px] py-[43px] px-[36px] bg-white relative;
        .name{
          @apply text-[36px] font-bold mb-[6px];
        }
        .text{
          @apply text-[22px];
        }
        .icon-group{
          @apply absolute right-0 bottom-0;
          .small-box{
            @apply w-[136px] h-[174px] block;
          }
          .img{
            @apply absolute right-[18px] bottom-[46px] w-[80px] h-[80px] block;
          }
        }
      }
    }
  }
  .integral-box{
    box-shadow: 0px 9px 27px 0px rgba(153,153,153,0.3);
    border-radius: 87px;
  }
  .active-collect{
    
    .img{
      box-shadow: 0px 4px 11px 0px rgba(153,153,153,0.3);
      border-radius: 87px;
    }
    .c-box{
      .text{
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}